<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Scrollspy component - UIkit tests</title>
        <script src="../../vendor/jquery.js"></script>
        <script src="_test.js"></script>

        <style>

            .uk-nav {
                position: fixed;
                top: 20px;
                right: 20px;
            }

        </style>

    </head>

    <body>

        <ul class="uk-nav uk-nav-side" data-uk-scrollspy-nav="{closest:'li', smoothscroll:true}">
            <li><a href="#animation-repeat">Repeat</a></li>
            <li><a href="#animation-delay">Delay</a></li>
            <li><a href="#animation-fade">Fade</a></li>
            <li><a href="#animation-scale-up">Scale Up</a></li>
            <li><a href="#animation-scale-down">Scale Down</a></li>
            <li><a href="#animation-slide-left">Slide Left</a></li>
            <li><a href="#animation-slide-right">Slide Right</a></li>
            <li><a href="#animation-slide-top">Slide Top</a></li>
            <li><a href="#animation-slide-bottom">Slide Bottom</a></li>
        </ul>

        <div class="uk-container uk-container-center">

            <h1>ScrollSpy</h1>

            <h2 id="animation-repeat">Repeat</h2>

            <div class="uk-grid" data-uk-grid-match="{target:'> div > .uk-panel'}" data-uk-grid-margin>
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade'}">
                        <p>The element is animated only the first time it appears in the viewport.</p>
                    </div>
                </div>
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
                        <p>The element is animated everytime it appears in the viewport.</p>
                    </div>
                </div>
            </div>

            <h2 id="animation-delay">Delay</h2>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
                        <p>The animation of this element is delayed by some milliseconds.</p>
                    </div>
                </div>
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300, repeat: true}">
                        <p>The animation of this element is delayed by some milliseconds.</p>
                    </div>
                </div>
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:600, repeat: true}">
                        <p>The animation of this element is delayed by some milliseconds.</p>
                    </div>
                </div>
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:900, repeat: true}">
                        <p>The animation of this element is delayed by some milliseconds.</p>
                    </div>
                </div>
            </div>

            <h2>IDs</h2>

            <div id="animation-fade" class="uk-grid">
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
                        <h3 class="uk-panel-title">Fade</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
                        <h3 class="uk-panel-title">Fade</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-2-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
                        <h3 class="uk-panel-title">Fade</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-3-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
                        <h3 class="uk-panel-title">Fade</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div id="animation-scale-up" class="uk-grid">
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
                        <h3 class="uk-panel-title">Scale up</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
                        <h3 class="uk-panel-title">Scale up</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-2-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
                        <h3 class="uk-panel-title">Scale up</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-3-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-up', repeat: true}">
                        <h3 class="uk-panel-title">Scale up</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div id="animation-scale-down" class="uk-grid">
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}">
                        <h3 class="uk-panel-title">Scale down</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}">
                        <h3 class="uk-panel-title">Scale down</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-2-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}">
                        <h3 class="uk-panel-title">Scale down</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-3-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-scale-down', repeat: true}">
                        <h3 class="uk-panel-title">Scale down</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div id="animation-slide-left" class="uk-grid">
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true}">
                        <h3 class="uk-panel-title">Slide left</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true}">
                        <h3 class="uk-panel-title">Slide left</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-2-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true}">
                        <h3 class="uk-panel-title">Slide left</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-3-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-left', repeat: true}">
                        <h3 class="uk-panel-title">Slide left</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div id="animation-slide-right" class="uk-grid">
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
                        <h3 class="uk-panel-title">Slide right</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
                        <h3 class="uk-panel-title">Slide right</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-2-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
                        <h3 class="uk-panel-title">Slide right</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-3-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-right', repeat: true}">
                        <h3 class="uk-panel-title">Slide right</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div id="animation-slide-top" class="uk-grid">
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">
                        <h3 class="uk-panel-title">Slide top</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">
                        <h3 class="uk-panel-title">Slide top</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-2-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">
                        <h3 class="uk-panel-title">Slide top</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-3-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-top', repeat: true}">
                        <h3 class="uk-panel-title">Slide top</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div id="animation-slide-bottom" class="uk-grid">
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true}">
                        <h3 class="uk-panel-title">Slide bottom</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true}">
                        <h3 class="uk-panel-title">Slide bottom</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-2-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true}">
                        <h3 class="uk-panel-title">Slide bottom</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div class="uk-grid">
                <div class="uk-width-medium-1-4 uk-push-3-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-slide-bottom', repeat: true}">
                        <h3 class="uk-panel-title">Slide bottom</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

            <div id="animation-delay" class="uk-grid">
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', repeat: true}">
                        <h3 class="uk-panel-title">Delay</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:300, repeat: true}">
                        <h3 class="uk-panel-title">Delay</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:600, repeat: true}">
                        <h3 class="uk-panel-title">Delay</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
                <div class="uk-width-medium-1-4">
                    <div class="uk-panel uk-panel-box" data-uk-scrollspy="{cls:'uk-animation-fade', delay:900, repeat: true}">
                        <h3 class="uk-panel-title">Delay</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
                    </div>
                </div>
            </div>

        </div>

    </body>
</html>